<?php $this->headTitle('Allocate Product');  ?>

<?php if(!empty($this->returnMessageSuccess)): ?>
<div class="success"><?php echo $this->escape($this->returnMessageSuccess[0]); ?></div>
<?php endif; ?>

<?php if(!empty($this->returnMessageWarning)): ?>
<div class="warning"><?php echo $this->escape($this->returnMessageWarning[0]); ?></div>
<?php endif; ?>

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="heading">
    <h1 style="background-image: url('images/setting.png');">Allocate Product</h1>
    <div class="buttons"><a class="button" id="allocateBtn"><span>Allocate</span></a></div>
    </div>
  <div class="content">
      <form action="<?php echo $this->url(array(),'allocationAllocate',true); ?>" method="post" enctype="multipart/form-data" id="form" autocomplete="off">

          <table id="products" class="list">
          <thead id="productHeader">
            <tr>
              <td class="left">Product</td>
              <td class="right">Quantity To Allocate</td>
              <td class="right">To Branch</td>
            </tr>
          </thead>

        </table>

      <table>
          <tr>
		    <td>Add Product(s):<br/>
		      <table>
			    <tr>
			      <td style="padding: 0;" colspan="3"><select id="category" style="margin-bottom: 5px;" onchange="getProducts();">
                                                                 <?php foreach($this->categories as $category): ?>
                                                                <option value="<?php echo $category['categoryId']; ?>"><?php echo $this->escape($category['name']); ?></option>
                                                                 <?php endforeach; ?>
			        			        </select></td>
			    </tr>
			    <tr>
			      <td style="padding: 0;">
			        <select multiple="multiple" id="product" size="10" style="width: 350px;">
			        </select>

			      </td>
			      <td style="vertical-align: middle;"><span class="add" onclick="addProduct();">&nbsp;</span></td>
			    </tr>
		    </table>
		  </tr>
		</table>
      </form>
     
  </div>
</div>

<script type="text/javascript"><!--

var productRow = 1;
var unallocated = '';

function addProduct() {

	$('#product :selected').each(function() {
                         
            $.ajax({
		url: 'ajax/allocation/' + $(this).val(),
		dataType: 'json',
		success: function(data) {
			unallocated = data.unallocated;
		},
                async: false
            });
                  
            html  = '<tbody id="product_' + productRow + '">';
            html += '<tr>';
	    html += '<td class="left">';
	    html += '<input type="hidden" name="product[' + productRow + '][productId]" value="' + $(this).val() + '">';
	    html += '<span onclick="$(\'#product_' + productRow + '\').remove();" class="remove">&nbsp;</span>';
	    html += '<a target="_blank" href="catalog/product/update/' + $(this).val() + '">' + $(this).text() + '</a><br /><span class="help">(Total Unallocated Quantity = <b>' + unallocated + '</b>)</span>';
	    html += '</td>';
            html += '<td class="right"><input type="text" name="product[' + productRow + '][quantity]" value="" size="4" /></td>';
	    html += '<td class="right"><select name="product[' + productRow + '][branchId]"><option value="">-- Select Branch --</option><?php foreach($this->branches as $branch): ?><option value="<?php echo $branch->branchId; ?>"><?php echo $this->escape($branch->name); ?></option><?php endforeach; ?></select></td>';
	    html += '</tr>';
	    html += '</tbody>';

	    $('#productHeader').after(html);

	    productRow++;

            unallocated = '';
	});
}
//--></script>

<script type="text/javascript"><!--
function getProducts() {
    
	$('#product option').remove();

	$.ajax({
		url: 'ajax/products/' + $('#category').val(),
		dataType: 'json',
		success: function(data) {
			for (i = 0; i < data.length; i++) {
	 			$('#product').append('<option value="' + data[i]['productId'] + '">' + data[i]['name'] + '</option>');
			}
		}
	});
}

getProducts();
//--></script>

<script type="text/javascript">

$(document).ready(function(){

    // Confirm Allocate
    $('#allocateBtn').click(function(){

            valuesOk = false;

		$("input[name*=\'quantity\']").each(function(i,e){
			if(($.trim($(this).val()) == "") || (Number($(this).val()) <= 0) || (isNaN(Number($(this).val())))){
				alert("Please enter quantity to allocate.");
                                $(this).focus();
                                valuesOk = false;
                                return false;
				}else{
                                    valuesOk = true;
                                }
			});

                 if(valuesOk){
                        $("select[name*=\'branchId']").each(function(i,e){
			if($.trim($(this).val()) == ""){
				alert("Please select branch to allocate to.");
                                $(this).focus();
                                valuesOk = false;
                                return false;
				}else{
                                    valuesOk = true;
                                }
			});
                  }
                 

                        if(valuesOk){
                            if (confirm ('Confirm?')) {
                                            $('#form').submit();
                                }
                        }
       
    });

});
</script>